<template>
	<view>
		<view class="box">

			<view class="pl30 pr30 mt30">
				<view class=" r_area_block_1 pt-[30rpx]" style="padding-top: 30rpx;padding-bottom: 30rpx;">
					<!-- <view class="pt30 pb20 fs24 lh34 cor_666 r_bb2">发货备注</view> -->
					<view class="textarea-bz">
						<textarea v-model="form.desc" style="height: 400rpx;font-size: 24rpx;" :maxlength="-1" 
						placeholder="请描述一下您的求购需求"
						 count></textarea>
					</view>
					<upload-image v-model="form.photos" mutiple :maxUpload="9" showProgress></upload-image>
				</view>


				<view class="mt30 r_area_block_1">
					<view class="r_bb2 flex_box aic ">
						<view class="fs30">报价：</view>
						<view>
							<u-checkbox activeColor="#F7DA1C" shape="circle" v-model="form.price_type" >
								按量洽谈
								</u-checkbox>
							<!-- <u-radio-group  v-model="form.price_type" activeColor="#F7DA1C">
								<u-radio   :name="1">按量洽谈</u-radio>
							</u-radio-group> -->
						</view>
						<view class="item ov ">

							<input type="text" style="flex: 1;" class="ipt_01" placeholder-style="color: #BBBBBB;"
								placeholder="请输入单价" />
						</view>
					</view>
					<view class="flex_box aic mt-[20rpx] pb-[20rpx]">
						<view class="fs30">邮费：</view>
						<view class="item ov" style="display: flex;justify-content: space-between;">
							<u-radio-group v-model="form.is_baoyou" activeColor="#F7DA1C">
								<u-radio :name="1">包邮</u-radio>
								<u-radio :name="2">不包邮</u-radio>
								<u-radio :name="3">按量洽谈</u-radio>
							</u-radio-group>
						</view>

					</view>
				</view>



				<view class="fenlei-warp">
					<view
					@click="handleChange(i.id)"
					 :class="{xuanzhong:form.cat_id == i.id}"
					class="fenlei-item" v-for="(i,k) in tabList" :key="k"  >
						{{i.cat_name}}
						</view>
				</view>


			</view>

        <view class="mt20 pb5 pl30 pr30 fs26 lh38 cor_666" style="line-height: 1.8;">
			<view>温馨提示：勾选，按量洽谈，则不填写单价</view>
			<view>报价-按量洽谈：根据货量谈价格，可以在描述内填写价格</view>
			<view>报价-填写价格：无论多少都是  ￥xxx/台</view>
			<view>包邮：收货，并且报销邮费</view>
			<view>不包邮：收货，卖方自行出邮费</view>
			<view>按量洽谈：根据货物多少协商</view>
		</view>



			<view class="fix_btn_bottom" @click="createOrderEnv">
				<view class="button_sty">立即发布</view>
			</view>

		</view><!-- box -->
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, computed } from 'vue'
	import { fabu, getQgCat, getQgLists } from '@/api/news'
	import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
	
	const tabList = ref<any>([])
	const current = ref<number>(0)
	
	const handleChange = (index: number) => {
	    form.cat_id = Number(index)
	}
	
	const getData = async () => {
		const data = await getQgCat()
		tabList.value = data;
		form.cat_id = data[0].id;
	}
	
	const form = reactive<any>({
		desc:'',
		photos:[],
		cat_id:0,
		is_baoyou:0,
		price:0,
		price_type:0,
	})
	
	const createOrderEnv = async () => {
		uni.showLoading({
		    title: '请稍后...'
		})
		await fabu(form);
		uni.$u.toast('下单成功')
		
		uni.reLaunch({
			url:'/pages/qiugou/index'
		})
		uni.hideLoading()
	}
	
	
	onLoad((options) => {
		getData()
	})
</script>

<style lang="scss">
	.fenlei-warp {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 30rpx;
		
		.fenlei-item {
			height: 72rpx;
			line-height: 72rpx;
			padding: 0 20rpx;
			background: #FFFFFF;
			color: #333333;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 28rpx;
			flex: 0 0 calc(33% - 10px);
			margin-right: 10px;
			margin-bottom: 10px;
			text-align: center;
			&:nth-child(3n) {
				margin-right: 0;
			}
		}
		.xuanzhong{
			background: linear-gradient(180deg, #F7DA1C 0%, #F7DA1C 100%);
			color: #FFFFFF;
		}	
	}

	page {
		background: #F6F7FB;
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.r_area_block_1 {
		position: relative;
		padding: 0 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.ipt_01 {
		position: relative;
		display: inline-block;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
		font-size: 30rpx;
		color: #333;
		background: transparent;
		border: 0;
		outline: none;
	}

	.fix_btn_bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		overflow: hidden;
		z-index: 5;
	}

	.fix_btn_bottom .button_sty {
		display: block;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background: linear-gradient(270deg, #9AE910 0%, #0EE6A1 100%);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.button_pos {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 2;
	}
</style>